<template>
  <div id="de-detail">
    <header-bar>
      <span slot="major-bar" @click="toDemand">{{main}}</span>
      <span slot="next-bar"> > {{title}}</span>
    </header-bar>
    <div class="de-detail">
      <div class="de-detail-box">
      <main-detail  :title1='title' :company1='company' :date1="date" :message1='message' :content1='content' @btnclick='bid'/>
    <div class="de-detail-context">
      <demand-detail-item :myarea='area' :myperiod='period' :myphone='phone' :mycontact='contact' :myversion='version' :myrequires='requires' :mystandard='standard'/>
    </div>
    </div>
    </div>
  </div>
</template>
<script>
import HeaderBar from '../../components/common/detail/HeaderBar.vue';
import MainDetail from '../../components/content/detail/MainDetail.vue';
import {getDemandDataById,BidById} from 'api/demand.js'
import DemandDetailItem from '../../components/content/detail/DemandDetailItem.vue';
export default {
 name:'DeDetail',
 data(){
   return {
     id:null,
      title:'',
      main:'需求广场',
      date:'',
      company:'',
      content:'',
      message:'投标',
      area:'',
      period:'',
      phone:'',
      contact:'',
      version:'',
      requires:'',
      standard:''
   }
 },
  created(){
    this.id=this.$route.params.id;
    this.algodata();
  },
 components:{
   HeaderBar,
   MainDetail,
  DemandDetailItem
   },
 methods:{
   toDemand(){
     this.$router.push('/demand');
   },
   algodata(){
      let data={};
      data.id=this.id;
      getDemandDataById('/api/request/listRequestById',data)
      .then(res=>{
        this.title=res.data.title;
        this.date=res.data.date;
        this.company=res.data.company;
        this.content=res.data.content;
        this.area=res.data.area;
        this.period=res.data.period;
        this.phone=res.data.phone;
        this.contact=res.data.contact;
        this.version=res.data.version;
        this.requires=res.data.requires;
        this.standard=res.data.standard;
      })
      .catch(err=>{
        this.$Notice.error({
        title:'请求失败',
        duration:5})
      })
    },
    bid(){
      if(sessionStorage.getItem('mytoken')){
      let data={};
      data.userId=sessionStorage.getItem('id');
      data.requestId=this.id;
      BidById('/api/user/bid',data)
      .then(res=>{
        this.$Notice.success({
        title:'投标成功',
        duration:5}) 
      })
      .catch(err=>{
        this.$Notice.error({
        title:'投标失败',
        duration:5})
      });
      }else{
        this.$Notice.warning({
        title:'请先登录',
        duration:5})
      }
    }
 }
}
</script>
<style>
#de-detail .major-bar{
  cursor: pointer;
  margin-right: 1%;
}
#de-detail{
  width: 60%;
  margin: 0 auto;
}
.de-detail{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 2% 0;
  color: #000;
}
.de-detail .de-detail-box{
width: 100%;
  padding: 1.5625rem;
  background-color: #fff;
  border-radius: 1.25rem;
}
.ivu-btn,
.ivu-btn:active,
.ivu-btn:focus,
.ivu-btn-text,
.ivu-btn-text:active,
.ivu-btn-text:focus{
  border-color: #8c30f5;
} 
</style>